<template>
  <div>
    <div class="box">
      <div class="content">
        <div class="login-wrapper">
          <h1>登录</h1>
          <div class="login-form">
            <div class="username form-item">
              <span>用户名</span>
              <input type="text" class="input-item" v-model="user" />
            </div>
            <div class="password form-item">
              <span>密码</span>
              <input type="password" class="input-item" v-model="password" />
            </div>
            <div class="captcha form-item">
              <span>验证码</span>
              <input type="text" class="input-item" v-model="yzm" />
              <p style="margin-top: 10px; text-align: right">
                {{ yzm_a }}<span class="yzm-btn" @click="getYzm()">获取</span>
              </p>
            </div>

            <button class="login-btn" @click="login">登 录</button>
          </div>
          <div class="divider">
            没有账号？<router-link to="/">注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LogonView",
  data() {
    return {
      user: "",
      password: "",
      yzm: "",
      yzm_a: "",
    };
  },
  methods: {
    getYzm() {
      this.yzm_a = Array.from({ length: 4 }, () => Math.floor(Math.random() * 10)).join('');
    },
    login() {
      try {
        const storedUser = JSON.parse(localStorage.getItem("user"));
        if (storedUser && this.user === storedUser.name && this.password === storedUser.password && this.yzm === this.yzm_a) {
          this.$message.success('登录成功');
          this.$router.push({ path: '/home' });
        } else if (this.yzm !== this.yzm_a) {
          this.$message.error('验证码错误');
        } else {
          this.$message.error('用户名或密码错误');
        }
      } catch (error) {
        console.error('存储的用户信息解析失败', error);
        this.$message.error('登录信息解析失败');
      }
    },
  },
  mounted() {
    this.getYzm();
  },
};
</script>

<style lang="less" scoped>
@charset "UTF-8";

.yzm-btn {
  cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100vw;
  height: 100vh;
  background-color: rgb(29, 67, 89);
}
.box .content .login-wrapper h1 {
  text-align: center;
}
.box .content .login-wrapper .login-form .form-item {
  margin: 20px 0;
}
.box .content .login-wrapper .login-form .form-item span {
  display: block;
  margin: 5px 20px;
  font-weight: 100;
}
.box .content .login-wrapper .login-form .form-item .input-item {
  width: 100%;
  border-radius: 40px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 200;
}
.box .content .login-wrapper .login-form .form-item .input-item:focus {
  outline: none;
}
.box .content .login-wrapper .login-form .login-btn {
  width: 100%;
  border-radius: 40px;
  color: #fff;
  border: 0;
  font-weight: 100;
  margin-top: 10px;
  cursor: pointer;
}
.box .content .login-wrapper .divider {
  width: 100%;
  margin: 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box .content .login-wrapper .divider span:nth-child(1) {
  flex: 1;
}
.box .content .login-wrapper .divider span:nth-child(3) {
  flex: 1;
}
.box .content .login-wrapper .divider .line {
  display: inline-block;
  max-width: 30%;
  width: 30%;
}
.box .content .login-wrapper .divider .divider-text {
  vertical-align: middle;
  margin: 0px 20px;
  line-height: 0px;
  display: inline-block;
  width: 100px;
}

@media (min-width: 767px) {
  .box .content {
    width: 85vw;
    height: 90vh;
    background: url("../assets/login_two.jpg") no-repeat;
    background-size: 90% 100%;
    position: absolute;
    right: 15%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #fff;
  }
  .box .content .login-wrapper {
    width: 25vw;
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
  }
  .box .content .login-wrapper h1 {
    text-align: center;
    font-size: 45px;
    color: rgb(81, 100, 115);
    margin-bottom: 40px;
  }
  .box .content .login-wrapper .login-form .form-item span {
    color: rgb(81, 100, 115);
  }
  .box .content .login-wrapper .login-form .form-item .input-item {
    height: 60px;
    border: 1px solid rgb(214, 222, 228);
  }
  .box .content .login-wrapper .login-form .login-btn {
    height: 50px;
    background-color: rgb(59, 72, 89);
    font-size: 20px;
  }
  .box .content .login-wrapper .divider .line {
    border-bottom: 1px solid rgb(214, 222, 228);
  }
}
</style>
